<template>
<uni-shadow-root class="partials-servant_list-type_two-index"><template name="typeTwo">
    <view class="servant_container_two" :style="'height:'+(servantShowWay==1? '100%':'')+';margin-top:'+(limitState>0?'0':'165rpx')">
      <block v-if="(!!servantList)">
        <view v-for="(result,index) in (servantList)" class="servant_item_two" v-if="limitState!=0?index<receiveData.jsonData.count:'ture'" :data-link="'servant_detail.html?servantId='+(result.id)" @click="tolinkUrl">
            <view class="item_two_head">
                <image class="item_two_head_img" mode="aspectFill" :src="(result.icon)+'?x-oss-process=style/preview'"></image>
            </view>
            <view class="item_two_info">
                <view class="item_two_info_top">
                    <text class="item_two_name">{{result.name}}</text>
                </view>
                <scroll-view scroll-x class="tab_scroll_list" scroll-with-animation="true" v-if="result.tagArray">
                    <view v-for="(item,index) in (result.tagArray)" :key="item.index" class="tab_item">{{item}}</view>
                </scroll-view>
                <text class="item_two_description" v-if="(!result.tagArray||result.tagArray.length==0)">{{result.description}}</text>
                <view class="item_two_bottom">
                    <text class="item_two_price" :style="'color:'+(setting.platformSetting.defaultColor)+';'" v-if="result.servicepPrice>0">￥{{result.servicepPrice||0}}</text>
                    
                    <text class="item_two_fen">{{result.pingfenStr}}分</text>
                    <text class="item_two_count" v-if="result.serviceCount>0">服务{{result.serviceCount}}单</text>
                </view>
            </view>
            <view class="servant_btn" :style="'background: '+(setting.platformSetting.defaultColor)+';'">
                预约
            </view>
        </view>
      </block>
      <block v-else>
        <view class="noservant">
          <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/17/11/9/46_337.jpg?x-oss-process=style/preview_120"></image>
          <text>没有相关商品</text>
        </view>
      </block>
    </view>
</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/servant_list/type_two/index'

Component({})

export default global['__wxComponents']['partials/servant_list/type_two/index']
</script>
<style platform="mp-weixin">
/* 列表样式 */
.servant_container_two{
  background:#fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.servant_item_two{
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow:4rpx 4rpx 12rpx #ddd;
  margin-top:20rpx;
  background:#fff;
  border-top:1rpx solid #eee;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  padding: 30rpx;
  box-sizing: border-box;
}
.item_two_head{
    width: 140rpx;
    height: 140rpx;
    margin-right: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.item_two_head_img{
    width: 100%;
    height: 100%;
    border-radius: 140rpx;
}
.item_two_info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #444;
    letter-spacing: 1rpx;
    width: 370rpx;
    font-size: 26rpx;
    height: 165rpx;
}
.item_two_info_top{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.tab_scroll_list{
    /* width: 80%; */
    width: 300rpx;
}
.tab_item{
    background: #f8f8f8;
    color: #666;
}
.item_two_name{
    font-size: 30rpx;
    font-weight: bold;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    margin-right: 10rpx;
}
.item_two_description{
    font-size: 24rpx;
    color: #666;
    width: 100%;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.item_two_bottom{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #555;
}
.item_two_price{
    font-size: 30rpx;
    font-weight: bold;
    margin-right: 20rpx;
}
.item_two_fen{
    margin-right: 20rpx;
}
.servant_btn{
    padding: 4rpx 20rpx;
    color: #fff;
    font-size: 24rpx;
    border-radius: 40rpx;
    width: 60rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-left: 20rpx;
}
</style>